<template>
  <swiper-container>
    <swiper-slide class="one">
      <img src="./images/引导页01.png" alt="" />
      <span>让养宠变得更简单</span>
    </swiper-slide>
    <swiper-slide class="two">
      <div class="two-round"></div>
      <div class="two-img">
        <img src="./images/引导页02-狗.png" alt="" />
      </div>
      <div class="two-imge">
        <img src="./images/引导页02-猫.png" alt="">
      </div>
      <span>宠物用品 应有尽有</span>
      <p>宠物衣食住行优质严选 正品保证</p>
    </swiper-slide>
    <swiper-slide class="three">
         <div class="three-round"></div>
      <div class="three-img">
        <img src="./images/引导页03-灰猫.png" alt="" />
      </div>
      <div class="three-imge">
        <img src="./images/引导页03-橘猫.png" alt="">
      </div>
      <span>养宠宝典 一起成长</span>
      <p>大家会随时的分享自己的养宠经验</p>

      <div class="three-but" @click="gohome">
        <button>进入萌宠</button>
      </div>
    </swiper-slide>
  </swiper-container>
</template>

<script>
import { register } from "swiper/element/bundle";
import { useRouter } from 'vue-router';

register();

export default {
  setup() {
    let router = useRouter()
    const spaceBetween = 10;
    const onProgress = (e) => {
      const [progress] = e.detail;
      console.log(progress);
    };

    const onSlideChange = () => {
      console.log("slide changed");
    };

    function gohome(){
        router.push({
            name:'login'
        })
    }


    return {
      spaceBetween,
      onProgress,
      onSlideChange,
      gohome
    };
  },
};
</script>

<style lang="less" scoped>
.one {
  width: 100%;
  height: 46rem;
  // background-color: orange;
}
.one img {
  width: 20.8125rem;
  height: 32.25rem;
  margin-left: 1.25rem;
  margin-top: 4.375rem;
}
.one span {
  font-size: 1.5625rem;
  position: absolute;
  left: 5.625rem;
  top: 25rem;
}
.two {
  width: 100%;
  height: 46rem;
  background-color: rgb(135, 142, 205);
  .two-round {
    width: 18.25rem;
    height: 18.25rem;
    border-radius: 50%;
    margin-left: 2.5rem;
    margin-top: 9.375rem;
    background-color: white;
  }
  .two-img{
    width: 9.25rem;
    height: 9.25rem;
    margin-left: 10.375rem;
    margin-top: -17rem;
  }
  .two-img img{
    width: 9.25rem;
    height: 9.25rem;
  }
  .two-imge{
    width: 9.25rem;
    height: 9.25rem;
    margin-left: 1.875rem;
    margin-top: -2.5rem;
  }
  .two-imge img{
     width: 9.25rem;
    height: 9.25rem;
  }
}
.two span{
    font-size: 1.5625rem;
    position: relative;
    top: 4.0625rem;
    left: 4.6875rem;
}
.two p{
    font-size: .625rem;
    position: relative;
    top: 5.0625rem;
    left: 5.2rem;
}
.three {
  width: 100%;
  height: 46rem;
  background-color: rgb(135, 142, 205);
  .three-round {
    width: 18.25rem;
    height: 18.25rem;
    border-radius: 50%;
    margin-left: 2.5rem;
    margin-top: 9.375rem;
    background-color: white;
  }
  .three-img{
    width: 9.25rem;
    height: 9.25rem;
    margin-left: 10.375rem;
    margin-top: -17rem;
  }
  .three-img img{
    width: 9.25rem;
    height: 9.25rem;
  }
  .three-imge{
    width: 9.25rem;
    height: 9.25rem;
    margin-left: 1.875rem;
    margin-top: -2.5rem;
  }
  .three-imge img{
     width: 9.25rem;
    height: 9.25rem;
  }
}
.three span{
    font-size: 1.5625rem;
    position: relative;
    top: 4.0625rem;
    left: 4.6875rem;
}
.three p{
    font-size: .625rem;
    position: relative;
    top: 5.0625rem;
    left: 5.2rem;
}
.three-but{
    width: 12.25rem;
    height: 2.25rem;
    margin-left: 5.4375rem;
    margin-top: 7.5rem;
}
.three-but button{
    width: 12.25rem;
    height: 2.25rem;
    background-color: rgb(187, 187, 223);
}
</style>